<#macro search_editor_demo>
<#-- 
<div data-bind='component: {name: "search-editor", params: {selectedStatus:"B", statusOptions:[new StatusOption("A","待审批"), new StatusOption("B","已审批"), new StatusOption("C","已上报")]}}'></div>
 -->
<div data-bind='component: {name: "search-editor", params: {showCreateBtn:false,selectedStatus:"C", statusOptions:[{value:"A",label:"待审批"}, {value:"B",label:"已审批"}, {value:"C",label:"已上报"}]}}'></div>

<script type="text/javascript">    
	<@search_editor/>
</script>
</#macro>

<#macro search_editor >
	<#local template>
	<#compress>
		<nav> 
			<div class="container-fluid"> 
				<div class="navbar-header"> 
					<a class="navbar-brand" href="#"  data-bind="text: title"></a> 
				</div>
				<form class="navbar-form navbar-left">
					<p class="navbar-brand form-control-static">状态</p>
					<#--       
			        <select>			        	
			        	<option data-bind="text: text"></option>
			        </select>	
			        
			        https://knockoutjs.com/documentation/options-binding.html
			        -->
			        <select data-bind="options: statusOptions, optionsText: 'label', optionsValue:'value', value: selectedStatus, event:{change: statusChanged}"></select>
			        
			        <span>&nbsp;&nbsp;</span>
			        <button type="button" class="btn btn-primary" data-bind="click: search">查询</button>
			        <button type="button" class="btn btn-default navbar-btn" data-bind="click:create, visible: showCreateBtn">添加</button>
		    	</form> 
		</nav>
	</#compress>	
	</#local>
	<#compress>
	<#-- <script type="text/javascript"> -->    
	<#-- http://knockoutjs.com/documentation/options-binding.html -->
	<#--    
			var StatusOption = function(value,label){
		    	this.value = value;
		    	this.label = label;    	
		    };
	 -->     	     	    
		    ko.components.register('search-editor', {
		        viewModel: function(params) {
		            this.statusOptions = ko.observableArray(params.statusOptions);
		            <#-- 
		            this.statusOptions = ko.observableArray([
		            	new StatusOption("A","AAA"),
		            	new StatusOption("B","BBB"),
		            	new StatusOption("C","CCC")
		            ]);
		            -->
		            this.showCreateBtn = ko.observable(params.showCreateBtn?true:false);
		            this.create = function(self,event){
		                console.log(self.selectedStatus());		                                
		            }; 
		            
		            this.title = ko.observable(params.title?params.title:"通知列表");
		            
		            if(params.selectedStatus){
		            	this.selectedStatus = ko.observable(params.selectedStatus);
		            }else{
		            	this.selectedStatus = ko.observable();
		            }
		            <#--onclick event-->
		            this.search = function(self,event){
		                console.log("****Search****" +self.selectedStatus());		                                
		            };
		            <#--onchange event-->
		            this.statusChanged = function(self,event){
		            	console.log(self.selectedStatus());
		            	console.log(event);
		            };		            
		        },
		        template: "${template?js_string}"
		    });
	<#--</script> -->
	</#compress>	
</#macro>
